<template>


		<view class="list flex flex-col justify-start items-center">
		<!-- <map id="myMap" style="width: 100%; height: 100vh;" 
		     longitude="113.324520" 
		     latitude="23.099994" 
		     scale="14" 
		     show-location="true"></map> -->
			 
			 
			 
			 <map v-if='showmap'   id="myMap"
		     show-location="true"  @regionchange="onRegionChange" style="width: 100%; height: 80vh;"   :latitude="latitude" :longitude="longitude" :markers="list" scale="12"  @markertap="markertap"   @callouttap='callouttap'>
			    
			       </map>
				   <view class="cover-smaller">
					   <view class="cover-smaller1">
						<!--  <view class="chang">
						  				 <image class="coverimg"   :src="cover_index==index?$util.img(item.image1):$util.img(item.image)"  v-for="(item,index) in listcaty" :key="index" @click="markertap2(item,index)"></image>
						  </view> -->
						  <view class="chang">
						  				 <image class="coverimg" :class="cover_index==index?'coverimghover':''"   :src="$util.img(item.image)"  v-for="(item,index) in listcaty" :key="index" @click="getditu(item.id,index)"></image>
						  </view> 
					   </view>
					
				   </view>

		
			<view class="bottom_map flex flex-col justify-center items-center" >
				
				
				<image src="@/static/jzz.svg" mode="widthFix" style="width: 300rpx; " v-if="showgun" ></image>  
			
				<view class="flex flex-col justify-start items-start w100" v-else>
					<view class="title">
						<text class="c_3 f_38 f_bold" style="font-size: 38rpx;">{{showaddress.titile}}</text>
						<text class="tag">{{showaddress.status}}</text>
					</view>
					<view class="f_28 c_6d mt10">
						联系电话：{{showaddress.mobile}}
					</view>
					<view class="f_28 c_6d mt10">
						地址详情：{{showaddress.address}}
					</view>
					<view class="btn flex flex-row justify-between items-center w100 mt_20">
						<view class="btn1 flex flex-row justify-center items-center" @click="callphone(showaddress.mobile)">
							<image src="@/static/d1.png" mode="widthFix" style="width: 40rpx;height: 40rpx;margin-right: 5rpx;"></image>
							拨打电话
						</view>
						<view class="btn1 btn2 flex flex-row justify-center items-center" @click="gomap(showaddress)">
							<image src="@/static/d2.png" mode="widthFix" style="width: 40rpx;height: 40rpx;margin-right: 5rpx;"></image>
							点击导航
						</view>
					</view>
				</view>
			</view>
			
			
			
			
		</view>
	</view>
</template>

<script>
	
	import http from 'common/js/http.js';
	export default {
		mixins:[http],
		data() {
			return {// 固定的经纬度，为了重置视图
			showmap:true,
      fixLongitude: undefined,
      fixLatitude: undefined,
      fixScale: undefined,
 isFirstLoad: true, // 是否是第一次加载
				 mapContext: undefined,
				listcaty:[],
				cover_index:0,
				showgun:false,
				status: 'loadmore',
				showaddress:{},
				latitude:'', //纬度
				longitude:'',//经度
				scale:12,//缩放级别
			
				article:[
				
				],
				interval:2000,
				list: [

				],
				menu:[										],
				keywords: '',
				city: '',
				rangeArr: [{
					text: '建湖县',
					value: 0

				}]
			}
		},
		
		onLoad() {
	this.getbanner()
		
		},
		methods: {
			  onRegionChange(event) {
			      if (this.isFirstLoad) {
			        this.scale = event.detail.scale; // 记录初始缩放级别
			        this.isFirstLoad = false;
			      }
			    },
			  resetScale() {
			      const mapContext = uni.createMapContext('map', this);
			      if (this.originalScale) {
			        mapContext.setScale({
			          scale: this.originalScale,
			          success: () => {
			            console.log('成功回到原始缩放级别');
			          },
			          fail: () => {
			            console.log('回到原始缩放级别失败');
			          },
			        });
			      }
			    },
			markertap2(e,index) {
			this.cover_index = index
			this.showgun = true
			let result =e
			this.showaddress = result
			
			this.latitude = e.latitude
			this.longitude = e.longitude
			 const mapContext = uni.createMapContext('map', this);
			     if (this.scale) {
			         mapContext.setScale({
			           scale: this.scale,
			           success: () => {
			             console.log('成功回到原始缩放级别');
			           },
			           fail: () => {
			             console.log('回到原始缩放级别失败');
			           },
			         });
			       }
				
			
				setTimeout(RES=>{
					this.showgun = false
				},500)
				},
				//地图点击事件
						markertap(e) {
							console.log("===你点击了标记点===",e)
							console.log(e.detail.markerId)
							
							let result =this.list.find(item => item.id === e.detail.markerId);
							this.showaddress = result
							},
						//地图点击事件
						callouttap(e){
							console.log('地图点击事件',e)
							let result = this.list.find(item => item.id === e.detail.markerId);
							this.showaddress = result
					},
		getbanner(){
			this.sendRequest({
				url: 'convenient/category',
				data: {
					town_id: 1
				},
				success: res => {
					console.log(res)
					if (res.code > 0) {
			
						this.listcaty = res.data
						this.getditu(this.listcaty[0].id)
						return false
						
						this.latitude=res.data[0].latitude
						this.longitude=res.data[0].longitude
						this.showaddress = this.list[0]
						
						this.list.map((item,index)=>{
							this.list[index].iconPath='../../static/dt.png',
							this.list[index].height='80rpx'
							
							this.list[index].width='80rpx'
							
							this.list[index].callout={//自定义标记点上方的气泡窗口 点击有效  
													content:item.titile,//文本
													color:'#0256FFFF',//文字颜色
													fontSize:14,//文本大小
													borderRadius:10,//边框圆角
													padding:10,
													bgColor:'#0256FF1A',//背景颜色
													display:'ALWAYS',//常显
													
													
												}
						})
					}
				}
			})
		},
		  zoomToFitMarkers() {
		    // 假设markers是包含所有标记点坐标的数组
		    const markers = this.list;
		    
		    // 计算边界
		    let minLat = Infinity, maxLat = -Infinity, minLng = Infinity, maxLng = -Infinity;
		    markers.forEach(marker => {
		      minLat = Math.min(minLat, marker.latitude);
		      maxLat = Math.max(maxLat, marker.latitude);
		      minLng = Math.min(minLng, marker.longitude);
		      maxLng = Math.max(maxLng, marker.longitude);
		    });
		    
		    // 计算中心点
		    const centerLat = (minLat + maxLat) / 2;
		    const centerLng = (minLng + maxLng) / 2;
		    
		    // 计算合适的缩放级别比较复杂，这里提供一个简化的逻辑，实际应用中可能需要根据屏幕尺寸、标记点分布等做进一步调整
		    const zoomLevel = this.calculateZoomLevel(minLat, maxLat, minLng, maxLng); // 自定义函数，根据边界经纬度计算缩放级别
		    
		    // 使用地图上下文设置地图状态
		    const mapContext = uni.createMapContext('myMap');
		    mapContext.moveToLocation(centerLat, centerLng, zoomLevel);
		  },
		  calculateZoomLevel(minLat, maxLat, minLng, maxLng){
			  let screenWidthPx=375
			  uni.getSystemInfo({
			    success: function(res) {
			      screenWidthPx = res.screenWidth;
			     
			      // 这里可以使用 screenWidth 进行后续的布局或计算
			    }
			  });
			
			    // 假设每个经度差对应屏幕上的像素距离，这取决于纬度，这里简化处理
			    const longitudePerPixel = (maxLng - minLng) / screenWidthPx;
			  
			    // 这里简化处理，未考虑纬度对距离压缩的影响，实际情况中应根据地图投影进行调整
			    // 以及考虑屏幕高度与纬度范围的适配，此处仅作示意
			    let zoomLevel = Math.round(Math.log(360 / (maxLng - minLng) / longitudePerPixel) / Math.LN2);
			  
			    // 确保缩放级别在有效范围内，比如微信小程序地图缩放级别一般在3-10之间
			    zoomLevel = Math.min(Math.max(zoomLevel, 3), zoomLevel);
			  
			    return zoomLevel;
		  },
		getditu(id,index){
			this.cover_index=index
			this.showmap = false
			this.sendRequest({
				url: 'convenient/list',
				data: {
					town_id: 1,
					category_id:id
				},
				success: res => {
					console.log(res)
					this.showmap =true
					if (res.code > 0) {
			
						this.list = res.data
						
						
						this.latitude=res.data[0].latitude
						this.longitude=res.data[0].longitude
						this.showaddress = this.list[0]
						this.scale=8
				
						this.list.map((item,index)=>{
							this.list[index].iconPath='../../static/dt.png',
							this.list[index].height='80rpx'
							
							this.list[index].width='80rpx'
							
							this.list[index].callout={//自定义标记点上方的气泡窗口 点击有效  
													content:item.titile,//文本
													color:'#0256FFFF',//文字颜色
													fontSize:14,//文本大小
													borderRadius:10,//边框圆角
													padding:10,
													bgColor:'#0256FF1A',//背景颜色
													display:'ALWAYS',//常显
													
													
												}
						})
			
				//	 mapContext.setScale(this.scale);
					}
				}
			})
		},
		gomenu(url) {
			uni.navigateTo({
				url: url
			})
		},
		getmenu() {
			this.sendRequest({
				url: 'cun/index',
				data: {
					pid: 5,
					town_id: 1,
				},
				success: res => {
					console.log(res)
					if (res.code > 0) {
		
						this.menu = res.data
					}
				}
			})
		},
			bindPickerChange(e) {
				console.log(e.detail.value)
				this.city = this.rangeArr[e.detail.value].text

			},
			callphone(e){
				uni.makePhoneCall({
				    phoneNumber: e  //此处写需要拨打的电话号码
				});
			},
			gomap(e){
				uni.openLocation({
				    latitude: e.latitude,
				    longitude: e.longitude,
				   name:e.titile,
				   address:e.address,
				   scale: 15,
				    success: function () {
				        console.log('成功调起导航');
				    },
				    fail: function(err) {
				        console.log('调起导航失败：', err);
				    }
				});
			}
		}
	}
</script>
 
<style lang="scss">
	
	.cover-smaller{
		position: fixed;
		left:0%;
		bottom:330rpx;
		width: 100%;
		padding:20rpx 0;
		background-color: #fff;
		
		overflow-x: auto;
		.cover-smaller1{
			width: 90%;
			margin-left: 5%;
			overflow-x: auto;
		}
			.chang{
				display: flex;
				
				    flex-wrap: nowrap;
					margin-right: 20rpx;
					
			}
		.coverimg{
			flex-shrink: 0;
			object-fit: cover;
			width: 100rpx;
			height:100rpx;
			margin:0 10rpx;
			border-radius: 10rpx;
			background-color: rgba(255, 255, 255, 0.6);
				border: 1rpx solid #b4dcff;
		}
		.coverimghover{
			background-color: rgba(144, 229, 255, 0.6);
			border: 1rpx solid #00aaff;
		}
	}
	
	.bottom_map{
		min-height: 320rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding:20rpx 40rpx;
		padding-top: 0;
		width: 100%;
		background-color: #fff;
		z-index: 99;
		.tag{
			margin-left: 20rpx;
			color: #0256FF;
			border-radius: 10rpx;
			border: 1rpx solid #0256FF;
			background: rgba(2,86,255,0.1);
			padding: 0rpx 10rpx;
			
		}
	}
	.btn1{
		width: 260rpx;
		height: 60rpx;
		background: #0256FF;
		border-radius: 50rpx ;
		font-size: 28rpx;
		color: #fff;
	}
	.btn2{
		background-color: #FFBC02E6;
	}
	.artice_list{
		padding: 20rpx 35rpx;
		.items{
			margin-bottom: 30rpx;
		}
		.a-img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}
		.read{
			width: 76rpx;
		}
		.info{
			width: 500rpx;
			.title{
				width: 100%;
				margin-bottom: 5rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.grb{
		margin-top:40rpx;
	}
	.grb-img{
		width: 200rpx;
	}
	page{
		background: #fff;
	}
	
	.menu{
		margin-top: 40rpx;
		.menu-item{
			width: 33.3%;
			margin: 20rpx 0;
			.menu-icon{
				width:80rpx ;
				height: 80rpx;
			}
		}
	}
	.banner{
		border-radius: 10rpx;
	}
	wx-swiper .wx-swiper-dot {
		
		background: rgba(0,0,0,0.1) !important;
		border: 1rpx solid #fff;
		}
	 
		wx-swiper .wx-swiper-dot-active {
			
			background: #fff !important;
		}
	
	// 	 .uni-swiper-dot {
	// 			// 指示点元素默认样式
	// 			width: 9rpx !important;
	// 			height: 9upx !important;
	// 			background: #C0C0C0 !important;
	// 			border: 1rpx solid #fff;
	// 		}
	
	// 	 .uni-swiper-dot-active {
	// 			// 指示点元素激活（当前选中）状态样式
	// 			width: 32rpx !important;
	// 			height: 8rpx !important;
	// 			background: #fff !important;
	// 			border-radius: 4rpx;
	// 		}
	.topView {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
		height: 384rpx;
	}
	.list {
		width: 100%;
		padding: 0;
		box-sizing: border-box;
.gonggao{
			box-sizing: border-box;
			padding:0 16rpx;
			padding-top:10rpx ;
			width: 100%;
			height: 54px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.1);
			border-radius: 0 0 8rpx 8rpx;
			text{
				width: 550rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.item {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.name {
				width: 100%;
				height: 100%;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_1 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(2, 86, 255, 0.8) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_2 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(14, 152, 105, 0.8) 0%, rgba(14, 152, 105, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_3 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 188, 2, 0.8) 0%, rgba(255, 188, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_4 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 2, 2, 0.8) 0%, rgba(255, 2, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}
		}

		.i_img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.i_img1 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}


	}


	.top {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20rpx 32rpx;
	}

	.search {
		width: 620rpx;
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 56rpx;
		opacity: 1;
		border: 1rpx solid #E6E6E6;
		padding: 0 10rpx;
		box-sizing: border-box;

		input {
			background: none;
			border: none;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style> 